<template>
  <div>
    <i-row :gutter="5">
      <i-col :xs="24" :sm="12" :md="6" :style="{marginBottom: '10px'}">
          <info-card
              id-name="courses_count"
              :end-val="count.courses"
              iconType="android-document"
              color="#2d8cf0"
              intro-text="已发布课程"
          ></info-card>
      </i-col>
      <i-col :xs="24" :sm="12" :md="6" :style="{marginBottom: '10px'}">
          <info-card
              id-name="posts_count"
              :end-val="count.posts"
              iconType="android-chat"
              color="#64d572"
              intro-text="问答"
          ></info-card>
      </i-col>
      <i-col :xs="24" :sm="12" :md="6" :style="{marginBottom: '10px'}">
          <info-card
              id-name="tags_count"
              :end-val="count.tags"
              iconType="android-bookmark"
              color="#fabb3d"
              intro-text="知识点"
          ></info-card>
      </i-col>
      <i-col :xs="24" :sm="12" :md="6" :style="{marginBottom: '10px'}">
          <info-card
              id-name="lives_count"
              :end-val="count.lives"
              iconType="android-camera"
              color="rgb(242, 94, 67)"
              intro-text="成功直播"
          ></info-card>
      </i-col>
    </i-row>
    <i-card style="margin-top:10px;">
      <chart
        style="width:100%;"
        :options="bar"
        ref="bar"
        auto-resize
      />
    </i-card>
  </div>
</template>

<script>
import InfoCard from '../components/info-card'
import ECharts from 'vue-echarts/components/ECharts'
import 'echarts/lib/chart/bar'
import 'echarts/theme/dark'

import Vue from 'vue'
export default {
  components: {
    InfoCard,
    chart: ECharts
  },
  data() {
    return {
      count: {
        courses: 0,
        posts: 0,
        tags: 0,
        lives: 0
      },
      bar: this.getBar()
    }
  },
  methods: {
    async load() {
      let response = await this.$http.get('/vts/data/summary')
      Vue.util.extend(this.count, response.data)
      let bar = this.$refs.bar
      bar.showLoading({
        text: '正在加载数据'
      })
      response = await this.$http.get('/vts/data/histories')
      bar.hideLoading()
      this.bar = this.getBar(response.data)
    },
    getBar(items) {
      return {
        legend: {
          data: ['课程数', '问答数', '直播数']
        },
        title: {
          text: '近一年新增数据',
          subtext: 'Default layout',
          top: 'bottom',
          left: 'center'
        },
        grid: {
          x: 40,
          x2: 40
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        // Declare X axis, which is a category axis, mapping
        // to the first column by default.
        xAxis: {
          type: 'category',
          data: (items && items[0]) || [],
          axisPointer: {
            type: 'shadow'
          }
        },
        // Declare Y axis, which is a value axis.
        yAxis: {
          type: 'value',
          name: '新增数'
        },
        // Declare several series, each of them mapped to a
        // column of the dataset by default.
        series: [
          {
            name: '课程数',
            type: 'bar',
            data: (items && items[1]) || []
          },
          {
            name: '问答数',
            type: 'bar',
            data: (items && items[2]) || []
          },
          {
            name: '直播数',
            type: 'bar',
            data: (items && items[3]) || []
          }
        ]
      }
    }
  },
  mounted() {
    // this.$emit('page-mounted')
    // this.load();
  },
  activated() {
    this.load()
  }
}
</script>

<style scoped lang="less">
.data {
  .icon-wrap {
    padding: 25px;
    text-align: center;
    i {
      font-size: 3em;
    }
  }
  .text-wrap {
    padding: 24px 25px !important;
  }
  h3 {
    color: white;
    font-size: 22px;
    line-height: 1;
    > span {
      display: block;
    }
    > small {
      font-size: 60%;
    }
  }
  > div {
    color: white !important;
    // padding: 0;
    .lessons {
      background: #1867cb;
      width: 100%;
      .text-wrap {
        background: lighten(#1867cb, 20%);
      }
    }
    .posts {
      background: #cc8a05;
      width: 100%;
      .text-wrap {
        background: lighten(#cc8a05, 20%);
      }
    }
    .tags {
      background: #206d5a;
      width: 100%;
      .text-wrap {
        background: lighten(#206d5a, 20%);
      }
    }
  }
}
</style>
